<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的好友</title>

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/userProfiles.css">
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="js/tab.js"></script>
    <script src="/js/common.js"></script>


</head>
<body>

<header class="aui-navBar aui-navBar-fixed">
    <a href="/mine/profiles.html" class="aui-navBar-item">
        <i class="icon icon-return"></i>
    </a>
    <div class="aui-center">
        <span class="aui-center-title">我的好友</span>
    </div>
    <a href="javascript:;" class="aui-navBar-item">
        <i class="icon icon-sys"></i>
    </a>
</header>

<div class="aui-tab-box" data-ydui-tab>
    <ul class="tab-nav">
        <li class="tab-nav-item tab-active">
            <a href="javascript:;">我的关注</a>
        </li>
        <li class="tab-nav-item">
            <a href="javascript:;">我的粉丝</a>
        </li>
    </ul>
    <div class="tab-panel">
        <div class="tab-panel-item tab-active">
            <div id="attBtn">
                <div class="tab-item" render-loop="list">
                    <a href="/userProfiles.html?id=" class="aui-list-item" render-fun="setHref" render-key="list.id">
                        <div class="aui-list-item-hd">
                            <img render-src="list.headImgUrl"  alt="">
                        </div>
                        <div class="aui-list-item-bd">
                            <h4 render-html="list.nickName"></h4>
                            <p render-html="list.sign"></p>
                        </div>
                        <span class="aui-list-item-fr">
                           <img src="#" alt="">
                                        <p style="color:#ce0000" id="cancelBtn" onclick="cancel">已关注</p>
                        </span>
                    </a>
                </div>

            </div>

        </div>



        <div class="tab-panel-item">
            <div id="fanBtn">
                <div class="tab-item" render-loop="list">
                    <a href="/userProfiles.html?id=" class="aui-list-item" render-fun="setHref" render-key="list.id">
                        <div class="aui-list-item-hd">
                            <img render-src="list.headImgUrl" alt="">
                        </div>
                        <div class="aui-list-item-bd">
                            <h4 render-html="list.nickName"></h4>
                            <p render-html="list.sign"></p>
                        </div>
                        <span class="aui-list-item-fr">
                            <img src="#" alt="">
                            <p style="color:#ce0000" id="followBtn">+ 关注</p>
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>


<script>
    $(function () {
        var params = getParams();
        if(params.id){
            $.get("/users/" + params.id + "/fans",function (data) {
                $("#attBtn").renderValues({list:data},{
                    setHref: function (item, value) {
                        $(item).attr("href",$(item).attr("href") + value);
                    }
                });
            })

            $.get("/users/" + params.id + "/attention",function (data) {
                $("#fanBtn").renderValues({list:data},{
                    setHref: function (item, value) {
                        $(item).attr("href",$(item).attr("href") + value);
                    }
                });
            })
        }


        $("#cancelBtn").click(function () {
            console.log(1);
        })

        //给关注绑定点击事件
        $("#followBtn").click(function () {
            $.ajax({
                url: "/users/"+params.id+"/author",
                type: "PUT",
                success: function () {
                    window.location.reload();
                }
            })
        })

        function cancel() {
            console.log(1);
        }


    })

</script>

</body>
</html>

